<template>
  <!-- 编辑承租商 -->
  <div class="app-container shop-detail">
    <!-- <div class="head-title">{{$t('shopProcess.merchantDetail')}}</div> -->
    <!-- 导航栏 -->
    <!-- <div class="nav-box">
      <div class="nav">
        <div :class="['nav-item', navStatus === 0 ? 'active' : '']" @click="switchNav(0)">{{$t('shopProcess.basicInfo')}}</div>
        <div :class="['nav-item', navStatus === 1 ? 'active' : '']" @click="switchNav(1)">{{$t('shopProcess.businessInfo')}}</div>
        <div :class="['nav-item', navStatus === 2 ? 'active' : '']" @click="switchNav(2)">{{$t('shopProcess.signUpInfo')}}</div>
        <div v-if="brandType == 1" :class="['nav-item', navStatus === 3 ? 'active' : '']" @click="switchNav(3)">{{$t('shopProcess.financeInfo')}}</div>
      </div>
    </div> -->
    <!-- 模块 -->
    <div class="shop-info-box">
      <!-- 基本信息 -->
      <div v-if="navStatus === 0" class="basic-info-mod">
        <!-- 店铺审核状态 -->
        <div class="audit-status">
          <!-- status 0 未审核 1已通过 -1未通过 2平台下线 3 平台下线待审核 -->
          <!-- shopStatus 店铺状态(-1:已删除 0: 停业中 1:营业中 2:平台下线 3:待审核 4:店铺申请中 5.审核失败) -->
          <div v-if="shopAuditStatus" class="audit-item">
            <span>{{$t('shopProcess.auditStatus')}}：</span>
            <span v-if="shopAuditStatus.status === -1">{{$t('shop.failed')}}</span>
            <span v-if="shopAuditStatus.status === 0">{{$t('shop.pendingReview')}}</span>
            <span v-if="shopAuditStatus.status === 1">{{$t('shop.passed')}}</span>
            <span v-if="shopAuditStatus.status === 2">{{$t('brand.offlineViolation')}}</span>
          </div>
          <div class="audit-item">
            <span>{{$t('shopProcess.accountStatus')}}：</span>
            <span v-if="shopBasicInfo.accountStatus === 0">{{$t('shopProcess.disable')}}</span>
            <span v-if="shopBasicInfo.accountStatus === 1">{{$t('shopProcess.enable')}}</span>
            <span v-if="shopBasicInfo.accountStatus === -1">{{$t('shopProcess.delete')}}</span>
          </div>
          <div class="audit-item">
            <span>{{$t('shopProcess.brandStatus')}}：</span>
            <span v-if="brandStatus === -1">{{$t('shopProcess.deleted')}}</span>
            <span v-if="brandStatus === 0">{{$t('shopProcess.closed')}}</span>
            <span v-if="brandStatus === 1">{{$t('shopProcess.inOperation')}}</span>
            <span v-if="brandStatus === 2">{{$t('brand.offlineViolation')}}</span>
            <span v-if="brandStatus === 3">{{$t('shopProcess.onlinePendingReview')}}</span>
            <span v-if="brandStatus === 4">{{$t('shopProcess.shopApplication')}}</span>
            <span v-if="brandStatus === 5">{{$t('shopProcess.storeOpenPendingReview')}}</span>
          </div>
        </div>
        <!-- 信息 -->
        <div class="basic-info-list">
          <el-form @submit.native.prevent
            ref="shopBasicInfo"
            label-width="120px"
            :model="shopBasicInfo"
            :rules="shopBasicInfoRules"
            size="small"
          >
            <div class="basic-info-box">
              <div class="left-info">
                <el-form-item :label="this.$i18n.t('brand.brandLogo')" prop="brandLogo">
                  <div class="business-license-box">
                    <div class="license-content">
                      <img-upload v-model="shopBasicInfo.brandLogo" />
                    </div>
                    <div class="upload-tips">{{ $t('shopProcess.logoTips') }}</div>
                  </div>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('brand.brandName')" prop="brandName">
                  <p class="txt">
                    <el-input
                      v-model="shopBasicInfo.brandName"
                      :placeholder="this.$i18n.t('brand.brandNameInputTips')"
                      maxlength="20"
                      @blur="
                        shopBasicInfo.brandName =
                        shopBasicInfo.brandName ?
                        removeHeadAndTailSpaces(shopBasicInfo.brandName) :
                        shopBasicInfo.brandName
                      "
                    />
                  </p>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('brand.contactName') + '：'" prop="contactName">
                  <p class="txt">
                    <el-input v-model="shopBasicInfo.contactName" :placeholder="this.$i18n.t('brand.contactNameInputTip')" maxlength="20" />
                  </p>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('shopProcess.tel')" prop="tel">
                  <p class="txt">
                    <el-input v-model="shopBasicInfo.tel" maxlength="11" :placeholder="this.$i18n.t('shopProcess.telInputTips')" />
                  </p>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('shopProcess.email')" prop="email">
                  <p class="txt">
                    <el-input v-model="shopBasicInfo.email" :placeholder="this.$i18n.t('shopProcess.emailInputTips')" maxlength="30" />
                  </p>
                </el-form-item>
                <el-form-item v-if="shopBasicInfo.brandType===1&&currentFlag" :label="this.$i18n.t('shopProcess.addr')" prop="currentAddr">
                  <el-cascader
                    ref="cascaderAddr"
                    v-model="shopBasicInfo.currentAddr"
                    :props="addrListTreeProps"
                    :placeholder="this.$i18n.t('shopProcess.addrInputTips')"
                    class="addr-select"
                    @change="handleAddrChange"
                  />
                </el-form-item>

                <el-form-item v-if="shopBasicInfo.brandType===1" :label="this.$i18n.t('shopProcess.detailAddr')" prop="shopAddress">
                  <el-input
                    v-model="shopBasicInfo.shopAddress"
                    :placeholder="this.$i18n.t('shopProcess.detailAddrInputTips')"
                    maxlength="50"
                    @blur="
                      shopBasicInfo.shopAddress =
                      shopBasicInfo.shopAddress ?
                      removeHeadAndTailSpaces(shopBasicInfo.shopAddress) :
                      shopBasicInfo.shopAddress;
                    "
                  >
                  </el-input>
                </el-form-item>
                <el-form-item :label="this.$i18n.t('shopProcess.intro')" prop="intro">
                  <div class="business-license-box">
                    <div class="license-content">
                      <el-input
                        v-model="shopBasicInfo.intro"
                        type="textarea"
                        :rows="4"
                        maxlength="200"
                        :placeholder="this.$i18n.t('shopProcess.introInput')"
                        @blur="
                          shopBasicInfo.intro =
                          shopBasicInfo.intro ?
                          removeHeadAndTailSpaces(shopBasicInfo.intro) :
                          shopBasicInfo.intro
                        "
                      />
                    </div>
                  </div>
                </el-form-item>
                <el-form-item v-if="shopBasicInfo.brandType===1" :label="this.$i18n.t('outlet.businTime')" required>
                  <p class="busin-time">
                    <el-col>
                      <el-form-item prop="openTime">
                        <el-time-picker
                          v-model="shopBasicInfo.openTime"
                          :placeholder="$t('text.startTime')"
                          format="HH:mm"
                          value-format="HH:mm:ss">
                        </el-time-picker>
                      </el-form-item>
                    </el-col>
                    <el-col style="margin:0 10px">
                      {{ $t('text.to') }}
                    </el-col>
                    <el-col>
                      <el-form-item prop="closeTime">
                        <el-time-picker
                          v-model="shopBasicInfo.closeTime"
                          :placeholder="$t('text.endTime')"
                          format="HH:mm"
                          value-format="HH:mm:ss">
                        </el-time-picker>
                      </el-form-item>
                    </el-col>
                  </p>
                </el-form-item>
                <el-form-item v-if="shopBasicInfo.brandType===1 && (shopBasicInfo.brandStatus===0 || shopBasicInfo.brandStatus===1)" :label="this.$i18n.t('outlet.businStatus')" prop="shopStatus">
                  <p class="txt">
                    <el-radio v-model="shopBasicInfo.shopStatus" :label="1">{{ $t('outlet.normal') }}</el-radio>
                    <el-radio v-model="shopBasicInfo.shopStatus" :label="0">{{ $t('outlet.offline') }}</el-radio>
                  </p>
                </el-form-item>
                <el-form-item v-if="shopBasicInfo.brandType===1" :label="this.$i18n.t('outlet.outletService')" prop="serviceIds">
                  <p class="txt">
                    <el-checkbox-group v-if="serviceList&&serviceList.length" v-model="shopBasicInfo.serviceIds">
                      <el-checkbox v-for="item in serviceList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
                    </el-checkbox-group>
                    <span v-else>--</span>
                  </p>
                </el-form-item>
              </div>
            </div>

          </el-form>
        </div>

        <div class="default-btn primary-btn foot-btn" @click="updateShopBasicInfo">{{ $t('shopProcess.saveBasicInfo') }}</div>
      </div>
      <!-- /基本信息 -->

      <!-- 工商信息 -->
      <div v-if="navStatus === 1" class="business-info-mod">
        <el-form @submit.native.prevent
          ref="companyInfoForm"
          :model="companyInfoForm"
          :rules="companyInfoRule"
          :label-width="lang === 'en' ? '200px' : '150px'"
          size="small"
        >
          <div class="ci-wrapper">
            <div class="left-info">
              <el-form-item :label="this.$i18n.t('shopProcess.creditCode')" prop="creditCode">
                <el-input v-model="companyInfoForm.creditCode" maxlength="20" :placeholder="this.$i18n.t('shopProcess.creditCodeInputTips')" />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.firmName')" prop="firmName">
                <el-input
                  v-model="companyInfoForm.firmName"
                  maxlength="50"
                  :placeholder="this.$i18n.t('shopProcess.firmNameInputTips')"
                  @blur="
                    companyInfoForm.firmName =
                    companyInfoForm.firmName ?
                    removeHeadAndTailSpaces(companyInfoForm.firmName) :
                    companyInfoForm.firmName
                  "
                />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.residence')" prop="residence">
                <el-input
                  v-model="companyInfoForm.residence"
                  maxlength="50"
                  :placeholder="this.$i18n.t('shopProcess.residenceInputTips')"
                  @blur="
                    companyInfoForm.residence =
                    companyInfoForm.residence ?
                    removeHeadAndTailSpaces(companyInfoForm.residence) :
                    companyInfoForm.residence
                  "
                />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.representative')" prop="representative">
                <el-input
                  v-model="companyInfoForm.representative"
                  prop="representative" maxlength="20"
                  :placeholder="this.$i18n.t('shopProcess.representativeInputTips')"
                  @blur="
                    companyInfoForm.representative =
                    companyInfoForm.representative ?
                    removeHeadAndTailSpaces(companyInfoForm.representative) :
                    companyInfoForm.representative
                  "
                />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.capital')">
                <div class="capital-int">
                  <el-input
                    v-model="companyInfoForm.capital"
                    prop="capital"
                    type="number"
                    :min="0"
                    :max="99999999"
                    @blur="changeNum"
                    @keydown.native="channelInputLimit"
                  >
                    <el-button slot="append">{{$t("shopProcess.tenThousandYuan")}}</el-button>
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.fountTime')" prop="foundTime">
                <el-date-picker
                  v-model="companyInfoForm.foundTime"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :placeholder="this.$i18n.t('platform.seleData')"
                  :picker-options="pickerOptions"
                />
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.businessTime')" prop="startTime">
                <div style="display: flex">
                  <el-date-picker
                    v-model="companyInfoForm.startTime"
                    style="width:162px;"
                    type="date"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :placeholder="this.$i18n.t('shopProcess.startTime')"
                    :clearable="false"
                  />
                  <span style="margin: 0 10px">-</span>
                  <span class="end-time">
                    <el-date-picker
                      ref="endTime"
                      v-model="companyInfoForm.endTime"
                      style="width:162px;"
                      type="date"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :placeholder="endTimeFlag && !companyInfoForm.endTime ? '' : this.$i18n.t('shopProcess.endTime')"
                      clearable
                      @change="endTimeFlag = false"
                      @focus="endTimeFlag = false"
                    />
                    <span v-if="endTimeFlag && !companyInfoForm.endTime" class="text" @click="focusEndTime">
                      {{ this.$i18n.t('shopProcess.noFixedTerm') }}
                    </span>
                  </span>
                </div>
              </el-form-item>
              <el-form-item :label="this.$i18n.t('shopProcess.businessScope')" prop="businessScope">
                <el-input
                  v-model="companyInfoForm.businessScope"
                  type="textarea"
                  resize="none"
                  :rows="4"
                  :placeholder="this.$i18n.t('shopProcess.businessScopeInputTips')"
                  maxlength="500"
                  @blur="
                    companyInfoForm.businessScope =
                    companyInfoForm.businessScope ?
                    removeHeadAndTailSpaces(companyInfoForm.businessScope) :
                    companyInfoForm.businessScope
                  "
                />
              </el-form-item>
            </div>
            <div class="right-info">
              <el-form-item :label="this.$i18n.t('shopProcess.businessLicense')" prop="businessLicense">
                <div class="business-license-box">
                  <div class="license-content">
                    <img-upload v-model="companyInfoForm.businessLicense" class="img-upload" />
                    <div class="example-box">
                      <img src="~@/assets/img/example-img/Business-license.png">
                      <div class="tips">{{ $t('shopProcess.example') }}</div>
                    </div>
                  </div>
                  <div class="upload-tips">{{ $t('shopProcess.logoTips') }}</div>
                </div>
              </el-form-item>
              <div class="id-box">
                <div class="upload-content">
                  <div class="upload-img" :class="lang === 'en' ? 'en-upload-img' : 'zh-upload-img'">
                    <el-form-item class="idcard" :label="this.$i18n.t('shopProcess.corporateIdentityCard')" prop="identityCardFront">
                      <img-upload
                        v-model="companyInfoForm.identityCardFront" class="img-upload"
                      />
                    </el-form-item>
                    <el-form-item class="idcard" label-width="0px" prop="identityCardLater">
                      <img-upload
                        v-model="companyInfoForm.identityCardLater" class="img-upload"
                      />
                    </el-form-item>
                  </div>
                  <div class="upload-example">
                    <div class="example-box">
                      <img src="~@/assets/img/example-img/idcard1.png">
                      <div class="tips">{{ $t('shopProcess.identityCardFront') }}</div>
                    </div>
                    <div class="example-box">
                      <img src="~@/assets/img/example-img/idcard2.png">
                      <div class="tips">{{ $t('shopProcess.identityCardLater') }}</div>
                    </div>
                  </div>
                  <div class="upload-tips">{{ $t('shopProcess.identityCardTips') }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-form>

        <div
          class="default-btn primary-btn"
          :class="lang === 'en' ? 'en-foot-btn' : 'foot-btn'"
          @click="updateCompanyInfo"
        >{{$t('shopProcess.saveCompanyInfo')}}</div>
      </div>
      <!-- /工商信息 -->

      <!-- 签约信息 -->
      <div v-if="navStatus === 2" class="contract-info table-box">
        <!-- 业态类目 -->
        <div class="s-sign-item s-item">
          <div class="table-data-title">
            <div class="text"><span class="stress">*</span>{{$t('shopProcess.signingCategory')}}</div>
            <div class="tips">
              {{ $t('shopProcess.preSigned') }}
              <span class="txt-bold">{{ signCategoryList.length }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}，
              {{ $t('shopProcess.application') }}
              <span class="txt-bold">{{ applyingCategoryNum }}</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}，
              {{ $t('shopProcess.mostAdd') }}
              <span class="txt-bold">200</span>
              {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}
            </div>
            <div class="edit-btn">
              <div class="default-btn primary-btn" @click="addSigningHandle()">{{ $t('shopProcess.addSigningCategory') }}</div>
              <div class="default-btn primary-btn" @click="cateAddOrUpdateHandle()">{{$t('shopProcess.editSigningCategory')}}</div>
            </div>
          </div>
          <div class="si-content">
            <el-table
              :data="signCategoryList"
              header-cell-class-name="table-header"
              style="width: 100%"
            >
              <!-- height="306" -->
                <el-table-column
                prop="parentName"
                :label="this.$i18n.t('shopProcess.parentCategoryName')"
              />
              <el-table-column
                prop="name"
                :label="this.$i18n.t('shopProcess.categoryName')"
              />
              <!-- <el-table-column
                prop="platformRate"
                :label="this.$i18n.t('shopProcess.categoryRate')"
              >
                <template slot-scope="{ row }">
                  <span v-if="row.platformRate || row.platformRate === 0">{{ row.platformRate }} %</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="customizeRate"
                :label="this.$i18n.t('shopProcess.customRate')"
              >
                <template slot-scope="{ row }">
                  <span v-if="row.customizeRate || row.customizeRate === 0">{{ row.customizeRate }} %</span>
                  <span v-else>--</span>
                </template>
              </el-table-column> -->
              <el-table-column
                prop="qualifications"
                :label="this.$i18n.t('shopProcess.categoryQualifications')"
              >
                <template slot-scope="{row}">
                  <div v-if="row.imgs.length" class="img-box">
                    <el-image
                      v-for="(img,index) in row.imgs"
                      :key="index"
                      class="tab-img"
                      :src="img"
                      :preview-src-list="row.imgs"
                    />
                    <!-- <img
                      v-for="(item, index) in row.imgs"
                      :key="index"
                      :src="item.indexOf('http')===-1 ? resourcesUrl + item : item"
                      @click="picturePreview(item)"
                    > -->
                  </div>
                  <span v-if="!row.imgs.length">--</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="categoryStatus"
                :label="this.$i18n.t('shopProcess.categoryStatus')"
              >
                <template slot-scope="scope">
                  <div v-if="scope.row.categoryStatus === 1" class="tag-txt">{{ $t('publics.normal') }}</div>
                  <div v-if="scope.row.categoryStatus === 0" class="tag-txt red-tag-txt">{{ $t('publics.LowerShelf') }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                :label="this.$i18n.t('remindPop.operation')"
                width="100px"
                align="center"
              >
                <template slot-scope="scope">
                  <div class="default-btn text-btn" @click="deleteSelectedCategory(scope)">{{ $t('remindPop.delete') }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 签约有效期 -->
        <!-- <div class="s-sign-item s-item">
          <div class="table-data-title">
            <div class="text"><span class="stress">*</span>{{ $t('shopProcess.validityPeriodOfContract') }}</div>
            <div class="tips">{{ $t('shopProcess.validPeriod') }}</div>
          </div>
          <div class="si-content">
            <div>
              <el-date-picker
                v-model="contractTimeRange"
                type="daterange"
                range-separator="至"
                :start-placeholder="this.$i18n.t('shopProcess.startTime')"
                :end-placeholder="this.$i18n.t('shopProcess.endTime')"
                value-format="yyyy-MM-dd HH:mm:ss"
                size="small"
                @change="getContractTimeRange"
                :clearable="false"
              />
            </div>
          </div>
        </div> -->
        <!-- 商家类型 -->
        <!-- <div class="s-sign-item s-item">
          <div class="table-data-title">
            <div class="text"><span class="stress">*</span>{{ $t('shopProcess.shopType') }}</div>
          </div>
          <div class="si-content">
              <div>
                <el-radio v-model="shopBasicInfo.brandType" :label="0" disabled>{{ $t('brand.chainBrand') }}</el-radio>
                <el-radio v-model="shopBasicInfo.brandType" :label="1" disabled>{{ $t('brand.selfOperatedBrand') }}</el-radio>
              </div>
            </div>
        </div> -->
        <!-- <div class="default-btn primary-btn foot-btn" @click="updateSigningInfo">{{ $t('shopProcess.saveContractInformation') }}</div> -->
      </div>
      <!-- /签约信息 -->

      <!-- 财务信息 -->
      <div v-if="navStatus === 3" class="financial-info">
        <div class="table-data-title">
          <div class="text"><span class="asterisk">*</span>{{ $t('shopProcess.settlementAccount') }}</div>
          <div class="tips">
            {{ $t('shopProcess.added') }}
            <span class="txt-bold">{{ settlementAccounts.length }}</span>
            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.settlementAccount') }},{{ $t('shopProcess.mostAdd') }}
            <span class="txt-bold">5</span>
            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.settlementAccount') }}
          </div>
        </div>
        <div class="table-box">
          <el-table
            :data="settlementAccounts"
            header-cell-class-name="table-header"
            style="width: 100%"
          >
            <el-table-column
              prop="bankName"
              :label="this.$i18n.t('shopProcess.bankName')"
            />
            <el-table-column
              prop="recipientName"
              :label="this.$i18n.t('shopProcess.recipientName')"
            />
            <el-table-column
              prop="cardNo"
              :label="this.$i18n.t('shopProcess.account')"
            />
            <el-table-column
              prop="openingBank"
              :label="this.$i18n.t('shopProcess.openingBank')"
            />
            <el-table-column
              prop="isDefault"
              :label="this.$i18n.t('shopProcess.masterAccount')"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.isDefault ? $t('shopProcess.yes') : $t('shopProcess.no') }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- /财务信息 -->

    </div>
    <!-- 编辑业态类目 -->
    <category-add-or-update v-if="cateAddOrUpdateVisible" ref="cateAddOrUpdate" :sign-category-list="signCategoryList" @closePopup="closePopup" />
    <!-- 业态类目弹窗 -->
    <add-signing-category
      v-if="addSigningCategoryVisible"
      ref="addSigningCategory"
      :applyForSign="true"
      :brandId="brandId"
      :signingCount="signCategoryList.length"
      :firstLevelCategoryId="firstLevelCategoryId"
      @closePopup="closePopup"
    />
  </div>
</template>

<script>
import ImgUpload from '@/components/img-upload'
import { validEmail, isCreditCode, validNoEmptySpace, removeHeadAndTailSpaces } from '@/utils/validate'
import categoryAddOrUpdate from '../shopEdit/category-add-or-update'
import addSigningCategory from '../signing-components/category-add-or-update'
import moment from 'moment'
export default {
  components: {
    ImgUpload,
    categoryAddOrUpdate,
    addSigningCategory
  },
  props:{
    brandId:{
      type:String | Number,
      default:""
    }
  },
  data () {
    const validateMobile = (rule, value, callback) => {
      let phoneReg = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/
      let mobile = /^(?:(?:\+|00)86)?1\d{10}$/
      if (phoneReg.test(value) || mobile.test(value)) {
        callback()
      } else {
        callback(new Error(this.$i18n.t('shopProcess.telErrorTips')))
      }
    }
    const validateEmail = (rule, value, callback) => {
      if (!validEmail(value) || value.indexOf(' ') !== -1) {
        callback(new Error(this.$i18n.t('shopProcess.emailErrorTips')))
      } else {
        callback()
      }
    }
    const vaildCreditCode = (rule, value, callback) => {
      if (!isCreditCode(value)) {
        callback(new Error(this.$i18n.t('shopProcess.creditCodeErrorTips')))
      } else {
        callback()
      }
    }
    const validateNotEmpty = (role, value, callback) => {
      if (validNoEmptySpace(value)) {
        callback(new Error(this.$i18n.t('shopProcess.inputAllSpace')))
      } else {
        callback()
      }
    }
    const validateNotEmptyRep = (role, value, callback) => {
      this.companyInfoForm.representative = this.companyInfoForm.representative.trim()
      if (this.companyInfoForm.representative === '' || this.companyInfoForm.representative.indexOf(' ') !== -1) {
        callback(new Error(this.$i18n.t('shopProcess.inputAllSpace')))
      } else {
        callback()
      }
    }
    return {
      removeHeadAndTailSpaces: removeHeadAndTailSpaces,
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      isSubmit: false,
      navStatus: 2,
      // 承租商类型(0:连锁承租商 1:自营承租商)
      brandType: 0,

      // 语言
      lang: window.localStorage.getItem('o2oLang'),

      // 店铺审核状态
      shopAuditStatus: {},
      // 店铺状态
      brandStatus: 0,

      // 店铺基本信息
      shopBasicInfo: {},
      contractTimeRange: [],
      shopBasicInfoRules: {
        merchantName: [
          { required: true, message: this.$i18n.t('shopProcess.merchantNameNotEmpty'), trigger: 'blur' },
          { min: 2, max: 10, message: this.$i18n.t('shopProcess.merchantNameErrorTips'), trigger: 'blur' },
          { validator: validateNotEmpty, trigger: 'blur' }

        ],
        brandName: [
          { required: true, message: this.$i18n.t('brandPopups.emptyBrandName'), trigger: 'blur' },
          { min: 2, max: 20, message: this.$i18n.t('shopProcess.shopNameInputTips'), trigger: 'blur' },
          { validator: validateNotEmpty, trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: this.$i18n.t('brand.contactNameNotEmpty'), trigger: 'blur' },
          { min: 2, max: 10, message: this.$i18n.t('brand.contactNameErrorTips'), trigger: 'blur' },
          { validator: validateNotEmpty, trigger: 'blur' }
        ],
        tel: [
          { required: true, message: this.$i18n.t('shopProcess.telNotEmpty'), trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ],
        email: [
          { required: true, message: this.$i18n.t('shopProcess.emailInputTips'), trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ],
        currentAddr: [
          { required: true, message: this.$i18n.t('shopProcess.addrInputTips'), trigger: ['blur', 'change'] }
        ],
        shopAddress: [
          { required: true, message: this.$i18n.t('shopProcess.detailAddrNotEmpty'), trigger: 'blur' },
          { validator: validateNotEmpty, trigger: 'blur' }
        ],
        shopLogo: [
          { required: true, message: this.$i18n.t('shopProcess.logoNotEmpty'), trigger: 'change' }
        ],
        openTime: [
          { required: true, message: this.$i18n.t('brand.selectOpenTime'), trigger: 'change' }
        ],
        closeTime: [
          { required: true, message: this.$i18n.t('brand.selectCloseTime'), trigger: 'change' }
        ]
      },
      // 省市区
      currentAddr: [], // 选中地址
      addrList: [],
      addrListTreeProps: {
        value: 'areaId',
        label: 'areaName',
        children: 'areas',
        lazy: true,
        lazyLoad: this.lazyLoad
      },
      currentFlag: false,
      // 签约分类
      category: [],
      // 服务集合
      serviceList: [],

      // 店铺工商信息
      companyInfoForm: {
        creditCode: '',
        firmName: '',
        residence: '',
        representative: '',
        capital: '',
        foundTime: '',
        startTime: '',
        endTime: '',
        // businessScope: '',
        businessLicense: '',
        identityCardFront: '',
        identityCardLater: ''
      },
      endTimeFlag: true,
      // 店铺签约信息
      signingInfo: {
        contractStartTime: '', // 签约起始时间
        contractEndTime: '', // 签约终止时间
        type: '' // 店铺类型 0普通店铺 1优选好店
      },
      firstLevelCategoryId: 0,
      serviceIds: [],
      pickerOptions: {
        disabledDate (time) {
          const date = moment().add(0, 'days').startOf('days')
          return (
            time.getTime() >= date.valueOf()
          )
        }
      },
      companyInfoRule: {
        creditCode: [
          { required: true, message: this.$i18n.t('shopProcess.creditCodeInputTips'), trigger: 'blur' },
          { validator: vaildCreditCode, trigger: 'blur' }
        ],
        firmName: [
          { required: true, message: this.$i18n.t('shopProcess.firmNameNotEmpty'), trigger: 'blur' }
        ],
        residence: [
          { validator: validateNotEmpty, trigger: ['blur', 'change'] }
        ],
        businessScope: [
          { required: true, message: this.$i18n.t('shopProcess.businessScopeNotEmpty'), trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: this.$i18n.t('formData.startTimeCannotBeEmpty'), trigger: 'change' }
        ],
        businessLicense: [
          { required: true, message: this.$i18n.t('shopProcess.businessLicenseNotEmpty'), trigger: 'change' }
        ],
        representative: [
          { required: true, message: this.$i18n.t('shopProcess.representativeNotEmpty'), trigger: 'blur' },
          { validator: validateNotEmptyRep, trigger: 'blur' }
        ],
        identityCardFront: [
          { required: true, message: this.$i18n.t('shopProcess.identityCardFrontNotEmpty'), trigger: 'change' }
        ],
        identityCardLater: [
          { required: true, message: this.$i18n.t('shopProcess.identityCardLaterNotEmpty'), trigger: 'change' }
        ]
      },

      // 店铺分类签约信息
      signCategoryList: [],
      // 自增签约承租商信息
      customizeBrandList: [],
      cateAddOrUpdateVisible: false,
      addSigningCategoryVisible: false,

      // 店铺财务信息
      settlementAccounts: [],
      baiduIndex: false,

      applyingCategoryNum: 0 // 申请中类目数量

    }
  },
  created () {
    // 查询基本信息
    this.switchNav(2)
  },

  mounted () {
    // 店铺审核状态
    this.queryShopAuditStatus()
  },

  methods: {
    switchNav (value) {
      this.navStatus = value
      if (value === 1) {
        // 查询工商信息
        this.queryShopBusinessInfo()
      } else if (value === 2) {
        // 查询分类签约信息
        this.getSignCategoryList()

        // 查询分类申请信息
        this.getSignCategoryList(0)
      } else if (value === 3) {
        // 查询财务信息
        this.queryShopFinancialInfo()
      } else {
        // 查询基本信息
        this.queryShopBasicInfo()
      }
      this.$forceUpdate()
    },


    /**
     * 删除已选分类
     */
    deleteSelectedCategory (scope) {
      if (this.signCategoryList.length <= 1) {
        this.$message({
          message: this.$i18n.t('brand.contractedTip'),
          type: 'warning'
        })
        return
      }
      this.$confirm(this.$i18n.t('shopProcess.defineDeleteSigning') + '[' + scope.row.name + ']?', this.$i18n.t('remindPop.remind'), {
        confirmButtonText: this.$i18n.t('remindPop.confirm'),
        cancelButtonText: this.$i18n.t('remindPop.cancel'),
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/platform/categoryShop'),
          method: 'DELETE',
          params: this.$http.adornParams({
            categoryId: scope.row.categoryId,
            shopId: this.brandId
          })
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('shopProcess.deleteSigningCategorySuccess'),
            type: 'success',
            duration: 1000,
            onClose: () => {}
          })
          this.getSignCategoryList()
        })
      }).catch(() => {})

      // const index = scope.$index
      // this.allSelectedCategories.splice(index, 1)
      // this.signCategories.splice(index, 1)
      // this.getIds(this.allSelectedCategories, 1)
    },

    /**
     * 店铺审核状态
     */
    queryShopAuditStatus () {
      this.$http({
        url: this.$http.adornUrl(`/brand/brandAuditing/${this.brandId}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.shopAuditStatus = data
        // this.shopStatus = data.shopDetail
      })
      // api.getShopAuditStatus(this.shopId).then(data => {
      //   this.shopAuditStatus = data
      //   this.shopStatus = data.shopDetail
      // })
    },

    /**
     * 查询基本信息
     */
    queryShopBasicInfo () {
      this.$http({
        url: this.$http.adornUrl('/platform/brand/info'),
        method: 'get',
        params: this.$http.adornParams({
          brandId: this.brandId
        })
      }).then(({ data }) => {
        this.brandType = data.brandType
        let shopDetailVO = {}
        if (data.brandType === 1) {
          // 如果是自营门店，则获取地区列表、签约分类与店铺的信息
          shopDetailVO = {
            province: data.shopDetailVO.province,
            city: data.shopDetailVO.city,
            area: data.shopDetailVO.area,
            street: data.shopDetailVO.street,
            shopAddress: data.shopDetailVO.shopAddress,
            openTime: data.shopDetailVO.openTime,
            closeTime: data.shopDetailVO.closeTime,
            provisions: data.shopDetailVO.provisions,
            serviceIds: data.shopDetailVO.provisions.map(item => item.id),
            currentAddr: [
              data.shopDetailVO.provinceId,
              data.shopDetailVO.cityId,
              data.shopDetailVO.areaId,
              data.shopDetailVO.streetId
            ],
            shopStatus: data.shopDetailVO.shopStatus
          }
          this.currentFlag = true
          this.getSignCategoryList()
        }
        this.shopBasicInfo = {
          ...data,
          ...shopDetailVO
        }
        this.signingInfo.type = data.type
        if (data.contractStartTime && data.contractEndTime) {
          this.signingInfo.contractStartTime = data.contractStartTime
          this.signingInfo.contractEndTime = data.contractEndTime
          this.contractTimeRange = [data.contractStartTime, data.contractEndTime]
        }
        this.brandStatus = data.brandStatus
      })
    },

    // 获取门店服务信息
    getOutletService () {
      this.$http({
        url: this.$http.adornUrl('/shop/provision/list'),
        method: 'get',
        params: this.$http.adornParams({
          categoryIds: this.signCategoryList.map((item) => {
            return item.categoryId
          }),
          status: 1
        })
      }).then(({data}) => {
        this.serviceList = data
      })
    },
    getShopLogoImgUrl (imgUrl) {
      this.shopBasicInfo.shopLogo = imgUrl
    },
    // 联级选择器动态加载
    lazyLoad (node, resolve) {
      if (node.level === 0) {
        this.$http({
          url: this.$http.adornUrl(`/admin/area/list`),
          method: 'get',
          params: this.$http.adornParams({level: 1})
        }).then(({ data }) => {
          resolve(data)
        })
      } else {
        this.$http({
          url: this.$http.adornUrl(`/admin/area/listByPid`),
          method: 'get',
          params: this.$http.adornParams({pid: node.value})
        }).then(({ data }) => {
          let nodes = data.map((item) => {
            return {
              ...item,
              leaf: item.level >= 4
            }
          })
        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes)
        })
      }
    },
    /**
     * 监听地址改变
     */
    handleAddrChange (value) {
      if (value.length > 0) {
        const labels = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels
        this.shopBasicInfo.province = labels[0]
        this.shopBasicInfo.provinceId = value[0]
        this.shopBasicInfo.city = labels[1]
        this.shopBasicInfo.cityId = value[1]
        this.shopBasicInfo.area = labels[2]
        this.shopBasicInfo.areaId = value[2]
        this.shopBasicInfo.street = labels[3]
        this.shopBasicInfo.streetId = value[3]
      }
    },

    /**
     * 查询工商信息
     */
    queryShopBusinessInfo () {
      this.$http({
        url: this.$http.adornUrl('/platform/shopCompany'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.brandId,
          sysType: 3
        })
      }).then(({ data }) => {
        this.companyInfoForm = data
        // this.companyInfoForm.timeRange = []
        // if (data.startTime && data.endTime) {
        //   this.companyInfoForm.timeRange.push(data.startTime)
        //   this.companyInfoForm.timeRange.push(data.endTime)
        // } else {
        //   this.companyInfoForm.timeRange = []
        // }
      })
    },
    focusEndTime () {
      this.$refs.endTime.focus()
    },
    /**
     * 营业时间赋值
     */
    handleTimeData (date) {
      // 单纯视图更新无限改用强制刷新this.$forceUpdate()
      this.$set(this.companyInfoForm, 'timeRange', [date[0], date[1]])
      this.$forceUpdate()
      this.companyInfoForm.startTime = date[0]
      this.companyInfoForm.endTime = date[1]
    },

    /**
     * 注册资本输入框校验
     */
    changeNum () {
      const capital = this.companyInfoForm.capital
      this.companyInfoForm.capital = this.checkInput(capital)
      if (Number.parseFloat(this.companyInfoForm.capital) === 0) {
        this.companyInfoForm.capital = 0
      }
      if (Number.parseFloat(this.companyInfoForm.capital) > 99999999) {
        this.companyInfoForm.capital = 99999999
      }
    },
    /**
     * input输入框只允许输入正数和小数(保留小数点后两位)
     */
    checkInput (num) {
      if (num) {
        var tmpVal = num.replace(/[^\d^\\.]/g, '')
        var reg = /^(0|([1-9]\d*))(\.\d{1,2})?$/ // 最多允许后输入两位小数
        if (!reg.test(tmpVal)) {
          tmpVal = tmpVal + ''
          tmpVal = tmpVal.substring(0, tmpVal.indexOf('.') + 3)
          var n = (tmpVal.split('.')).length - 1
          if (n > 1) {
            tmpVal = tmpVal.substring(0, tmpVal.indexOf('.'))
          }
        }
        return tmpVal
      } else {
        return ''
      }
    },
    /**
     * 输入框不允许输入'-'或'+'
     */
    channelInputLimit (e) {
      const key = e.key
      if (key === '-' || key === '+') {
        e.returnValue = false
        return false
      }
      return true
    },

    /**
     * 业态类目列表
     */
    getSignCategoryList (status = 1) {
      this.$http({
        url: this.$http.adornUrl('/prod/category/signingInfoByShopId'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.brandId,
          status: status // 签约状态：1：已通过 0待审核 -1未通过
        })
      }).then(({ data }) => {
        if (data) {
          if (status === 1) {
            this.signCategoryList = data
            this.firstLevelCategoryId = data.length ? data[0].firstLevelCategoryId : 0
            this.signCategoryList.forEach(item => {
              item.imgs = item.qualifications ? item.qualifications.split(',') : []
              if (item.imgs.length) {
                item.imgs.forEach(img => {
                  img = this.getImgSrc(img)
                })
              }
            })
          } else if (status === 0) {
            this.applyingCategoryNum = data.length
          }
          if (this.navStatus === 0) {
            this.getOutletService()
          }
        }
      })
    },

    /**
     * 获取图片路径
     */
    getImgSrc (img) {
      if (!img) {
        return ''
      }
      if (img.indexOf('http://') === 0 || img.indexOf('https://') === 0) {
        return img
      }
      return this.resourcesUrl + img
    },

    /**
     * 编辑签约信息弹窗
     */
    addSigningHandle () {
      this.addSigningCategoryVisible = true
      this.$nextTick(() => {
        this.$refs.addSigningCategory.init(this.brandId)
      })
    },
    /**
     * 编辑签约信息弹窗
     */
    cateAddOrUpdateHandle () {
      this.cateAddOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.cateAddOrUpdate.init(this.brandId)
      })
    },

    /**
     * 关闭弹窗
     */
    closePopup () {
      this.addSigningCategoryVisible = false
      this.cateAddOrUpdateVisible = false
      this.getSignCategoryList()

      // 查询分类申请信息
      this.getSignCategoryList(0)
    },

    /**
     * 获取图片路径
     */
    getImgUrl (imgUrl, index) {
      const url = imgUrl[0]
      this.signCategoryList[index].qualifications = this.signCategoryList[index].qualifications === '' ? url : this.signCategoryList[index].qualifications + ',' + url
    },

    /**
     * 查询财务信息
     */
    queryShopFinancialInfo () {
      this.$http({
        url: this.$http.adornUrl('/platform/shopBankCard/listByShopId'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.brandId
        })
      }).then(({ data }) => {
        this.settlementAccounts = data
      })
    },

    // 获取签约有效期
    getContractTimeRange (date) {
      this.signingInfo.contractStartTime = date[0]
      this.signingInfo.contractEndTime = date[1]
    },

    // 更新基本信息
    updateShopBasicInfo () {
      this.$refs['shopBasicInfo'].validate((valid) => {
        if (!valid) {
          return
        }
        let shopDetailVO = null
        if (this.shopBasicInfo.brandType === 1) {
          shopDetailVO = {
            streetId: this.shopBasicInfo.streetId,
            street: this.shopBasicInfo.street,
            areaId: this.shopBasicInfo.areaId,
            area: this.shopBasicInfo.area,
            cityId: this.shopBasicInfo.cityId,
            city: this.shopBasicInfo.city,
            provinceId: this.shopBasicInfo.provinceId,
            province: this.shopBasicInfo.province,
            closeTime: this.shopBasicInfo.closeTime,
            openTime: this.shopBasicInfo.openTime,
            serviceIds: this.shopBasicInfo.serviceIds,
            shopAddress: this.shopBasicInfo.shopAddress,
            shopStatus: this.shopBasicInfo.shopStatus
          }
        }
        this.shopBasicInfo.shopDetail = {
          ...this.shopBasicInfo.shopDetailVO,
          ...shopDetailVO
        }
        this.$http({
          url: this.$http.adornUrl('/platform/brand'),
          method: 'PUT',
          data: this.$http.adornData(this.shopBasicInfo)
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('shopProcess.baseInfoUpdateSuccess'),
            type: 'success',
            duration: 1000
          })
          this.queryShopBasicInfo()
        })
      })
    },

    /**
     * 储存工商信息
     */
    updateCompanyInfo () {
      this.companyInfoForm.brandId = this.brandId
      this.$refs['companyInfoForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.$http({
          url: this.$http.adornUrl('/platform/shopCompany'),
          method: 'PUT',
          data: this.$http.adornData(this.companyInfoForm)
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('shopProcess.businessInfoUpdateSuccess'),
            type: 'success',
            duration: 1000
          })
          this.queryShopBusinessInfo()
        })
      })
    },

    /**
     * 更新签约信息
     */
    updateSigningInfo () {
      if (this.isSubmit) {
        return
      }
      this.isSubmit = true
      this.signingInfo.shopId = this.brandId
      this.$http({
        url: this.$http.adornUrl('/platform/brand/updateSigningInfo'),
        method: 'PUT',
        data: this.$http.adornData(this.signingInfo)
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t('shopProcess.contractInfoUpdateSuccess'),
          type: 'success',
          duration: 1000
        })
        this.isSubmit = false
        // 更新签约信息成功后，需要更新店铺基本信息，因为店铺状态有可能发生改变
        this.queryShopBasicInfo()
      }).catch(({ e }) => {
        this.isSubmit = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container.shop-detail .shop-info-box .busin-time {
  display: flex;
  ::v-deep .el-form-item.el-form-item--small{
    margin:0
  }
}
.app-container {
  margin-bottom: 30px;
}
.app-container.shop-detail {
  font-size: 14px;
  color: #333;
  .head-title {
    margin-bottom: 15px;
  }

  .red-tag-txt {
    color: #ff4949;
  }

  // 导航栏
  .nav-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    .nav {
      position: relative;
      display: inline-block;
      display: flex;
      white-space: nowrap;
      .nav-item {
        margin: 0;
        font-size: 14px;
        line-height: 1em;
        padding: 15px 20px;
        color: #333;
        cursor: pointer;
      }
      .nav-item.active {
        color: #155BD4;
        // background: rgba(24,144,255, 0.06);
        border-radius: 4px 4px 0 0;
        border-bottom: 2px solid #155bd4;
      }
    }
  }
  .nav-box::before {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    border-bottom: 1px solid #f0f0f0;
    content: '';
  }

  .shop-info-box {
    // 公共
    p {
      margin: 0;
    }
    p.tit {
      display: inline-block;
      text-align: right;
    }
    .txt-bold {
      color: #333;
    }
    .asterisk {
      color: red;
      padding-right: 5px;
    }
    .table-box {
      display: block;
      width: 100%;
      margin: 20px 0;
      & >>> .el-table th, .el-table td {
        border-color: #f0f0f0;
      }
      & >>> .el-table__body-wrapper {
        max-height: 245px;
        overflow-y: scroll;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
      }
      & >>> .el-table__body-wrapper::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      & >>> .el-table__body {
        width: 100%;
      }
    }

    // 图片框大小统一
    & >>> .plugin-images {
      display: block;
      width: auto;
      height: 130px;
      img {
        vertical-align: top;
      }
    }
    & >>> .el-upload--picture-card,
    & >>> .el-upload-list--picture-card .el-upload-list__item {
      width: 130px;
      height: 130px;
      line-height: 130px;
      margin: 0;
    }
    & >>> .el-upload-list--picture-card {
      display: block;
      width: auto;
      height: 100%;
    }

    .img-upload {
      & ::v-deep .plugin-images,
      & ::v-deep .plugin-images .el-upload--picture-card,
      & ::v-deep .el-upload-list,
      & ::v-deep .el-upload-list__item.is-success {
        width: 130px;
        height: 130px;
      }
    }


    // 表单项下间距
    .ci-wrapper,
    .basic-info-box {
      .el-form-item {
        margin-bottom: 30px;
      }
    }

    .license-content {
      display: flex;
    }
    // 图片示例
    .upload-example {
      display: flex;
      margin-left: 120px;
      .example-box {
        margin-left: 0;
        &:nth-child(2) {
          margin-left: 30px;
        }
      }
    }
    // 示例框
    .example-box {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 130px;
      height: 130px;
      background: #FFFFFF;
      border: 1px solid #EAEAEA;
      border-radius: 3px;
      box-sizing: border-box;
      margin-left: 30px;
      img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 100%;
      }
      .tips {
        position: absolute;
        left: -1px;
        bottom: 0;
        width: 130px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #fff;
        background: rgba(51, 51, 51, 0.5);
        text-align: center;
        border-radius: 0px 0px 3px 3px;
      }
    }

      // 图片
    .tab-img {
      width: 60px;
      height: 60px;
      margin-right: 5px;
      cursor: pointer;
    }

    // 表格上的标题
    .table-data-title {
      display: flex;
      align-items: center;
      .text {
        font-size: 16px;
        min-width: 80px;
        .stress {
          color: #FF2120;
          padding-right: 5px;
        }
      }
      .tips {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
      .edit-btn {
        margin-left: auto;
        cursor: pointer;
      }
    }

    // 基本信息模块
    .basic-info-mod {
      // 审核状态
      .audit-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: #f7f8fa;
        padding: 20px;
        line-height: 1em;
        margin-top: 20px;
        color: #333;
        p.tit {
          width: 95px;
        }
        .week {
          color: #666;
        }
      }
      .addr-select {
        display: block;
        width: 100%;
      }
      .bg-img {
        display: flex;
        justify-content: flex-start;
        .business-license-box {
          margin-right: 30px;
          .img-tips {
            display: block;
            text-align: center;
            font-size: 12px;
            color: #666;
            line-height: 1.5em;
            margin-top: 8px;
            p  {
              margin: 0;
              padding: 0;
            }
          }
        }
      }
      .id-box {
        margin-bottom: 20px;
        .upload-content {
          .upload-img {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            & >>> .el-form-item {
              margin-bottom: 10px;
            }
            div {
              &:nth-child(2) {
                margin-left: 30px;
              }
            }
            .disabled-upload {
              & >>> .el-upload {
                background: #f5f7fa;
              }
            }
          }
          .upload-img.en-upload-img {
            & >>> .el-form-item.is-error {
              margin-bottom: 45px;
            }
          }
          .upload-img.zh-upload-img {
            & >>> .el-form-item.is-error {
              margin-bottom: 22px;
            }
          }
        }
        .upload-tips {
          margin-left: 120px;
        }
      }
      // 信息
      .basic-info-list {
        margin-top: 30px;
        .basic-info-box {
          display: flex;
          align-items: top;
          justify-content: flex-start;
          width: 100%;
          .left-info {
            width: 40%;
            min-width: 300px;
            margin-right: 80px;
            text-align: left;
          }
          .right-info {
            width: 45%;
            min-width: 300px;
          }
        }
        .basic-info-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 20px 30px;
        }
        .upload-tips {
          font-size: 12px;
          color: #999;
          height: auto;
          line-height: 1.5em;
          margin-top: 5px;
        }
      }
      .foot-btn {
        margin-left: 120px;
      }
    }
    // 工商信息
    .business-info-mod {
      margin-top: 30px;
      .ci-wrapper {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        .capital-int {
          & >>> .el-input__inner {
            padding-right: 0!important;
            border-radius: 2px 0 0 2px!important;
          }
        }
        & >>> .el-date-editor.el-input,
        & >>> .el-date-editor.el-input__inner {
          width: 100%;
        }
        & >>> .el-date-editor .el-range-separator {
          width: auto !important;
        }
        .left-info {
          // width: 504px;
          width: auto;
          min-width: 500px;
          max-width: 40%;
          .btn-box {
            display: flex;
            margin-left: 134px;
            margin-bottom: 40px;
            .prev-btn {
              margin-right: 13px;
            }
          }
        }
        .right-info {
          width: 440px;
          width: 45%;
          min-width: 300px;
          max-width: 500px;
          margin-left: 30px;
          .business-license-box {
            .license-content {
              display: flex;
            }
          }
          .id-box {
            .upload-content {
              .upload-img {
                display: flex;
                div {
                  &:nth-child(2) {
                    margin-left: 20px;
                  }
                }
              }
              .upload-example {
                display: flex;
                // margin-top: 15px;
                margin-left: 150px;
                .example-box {
                  margin-left: 0;
                  padding: 5px;
                  &:nth-child(2) {
                    margin-left: 20px;
                  }
                }
              }
              .upload-tips {
                margin-left: 150px;
              }
            }
          }
          .img-static {
            display: block;
            width: 120px;
            height: 120px;
          }
          .img-static:not(:first-child) {
            margin-left: 20px;
          }

          // 示例框
          .example-box {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 130px;
            height: 130px;
            background: #FFFFFF;
            border: 1px solid #EAEAEA;
            border-radius: 3px;
            box-sizing: border-box;
            margin-left: 20px;
            img {
              display: block;
              width: auto;
              max-width: 100%;
              height: auto;
              max-height: 100%;
            }
            .tips {
              position: absolute;
              left: -1px;
              bottom: 0;
              width: 130px;
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              color: #fff;
              background: rgba(51, 51, 51, 0.5);
              text-align: center;
              border-radius: 0px 0px 3px 3px;
            }
          }

          .upload-tips {
            font-size: 12px;
            color: #999;
            height: auto;
            line-height: 1.5em;
            margin-top: 10px;
          }

          // 图片上传框样式修改
          & >>> .el-upload {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 120px;
            height: 121px;
            background: #FFFFFF;
            border: 1px solid #EAEAEA;
            border-radius: 3px;
            box-sizing: border-box;
            // img {
            //   width: 120px;
            // }
            .el-icon-plus {
              font-size: 22px;
              color: #EAEAEA;
            }
          }
        }
      }
      .foot-btn {
        margin-left: 150px;
      }
      .en-foot-btn {
        margin-left: 200px;
      }
    }
    // 签约信息
    .contract-info {
      width: 100%;
      margin-top: 30px;
      margin-bottom: 80px;
      .s-item {
        .si-content {
          margin-top: 12px;
          .img-box {
            display: flex;
            align-items: center;
            // justify-content: center;
            img {
              // 图片自适应
              // width: auto;
              // height: auto;
              // max-width: 57px;
              // max-height: 57px;
              // 固定宽高
              width: 57px;
              height: 57px;
            }
            img:not(:last-child) {
              margin-right: 5px;
            }
          }
          .brand-logo {
            display: flex;
            align-items: flex-start;
            img {
              // 图片自适应
              // width: auto;
              // height: auto;
              // max-width: 57px;
              // max-height: 57px;
              // 固定宽高
              width: 57px;
              height: 57px;
            }
            img:not(:last-child) {
              margin: 5px;
            }
          }
        }
        .table-con {
          padding: 0;
        }
      }
      .s-brand-item {
        margin: 50px 0 40px;
      }
      .s-sign-item {
        margin-bottom: 30px;
      }
      table {
        .table-item {
          .img-item {
            img {
              vertical-align: middle;
              width: 38px;
              height: 38px;
              background: #EBF1FF;
              border-radius: 19px;
              margin: auto;
            }
          }
        }
      }
      .btn-box {
        display: flex;
        justify-content: center;
        margin-bottom: 39px;
        .prev-btn {
          margin-right: 13px;
        }
      }
      & >>> .el-range-editor.el-input__inner {
        width: auto;
      }
    }
    // 财务信息
    .financial-info {
      margin: 30px 0;
      .table-data-title {
        margin-bottom: 20px;
      }
      .table-box {
        margin-top: 10px;
        & >>> .el-table__body-wrapper {
          height: auto;
          max-height: 100%;
        }
      }
    }

  }
  .end-time {
    position: relative;
    .text {
      position: absolute;
      left: 30px;
    }
  }
}
</style>
